import React,{useState} from 'react'
import '../assets/css/login.scss'
import {Button, message,Form,Input} from 'antd'
import {UserOutlined,LockFilled,VerifiedOutlined} from '@ant-design/icons'
import { v4 } from 'uuid'
import {loginApi} from '@/api/sys'
import withRouter from '@/hoc/withRouter'
import useStorage from '@/hooks/useStorage'
function Login(props) {
  const [saveToken]=useStorage('token')
  const [uuid,setUuid]=useState(()=>v4())
  const validatePwd=(_,value)=>{
    let reg=/^([0-9a-zA-Z]+(\.*)\d*){8,}$/
    if(!reg.test(value)){
      return Promise.reject('密码格式不正确')
    }
    return Promise.resolve()
  }
  const validateCode=(_,value)=>{
    let reg=/^[a-z0-9]{5}$/
    if(!reg.test(value)){
      return Promise.reject('验证码格式有误')
    }
    return Promise.resolve()
  }
  const login=(arg)=>{
    loginApi({...arg,uuid,t:+new Date()}).then(res=>{
      if(res.data.code==0){
        //保存token信息
        saveToken(res.data.token)
        props.navigate('/home')
      }else if(res.data.code==500){
        message.warning(res.data.msg)
      }
     
    })
  }
  return (
    <div className='container'>
      <div className='login-container'>
         <div className='login-box'>
            <h1>欢迎登录</h1>
            <Form onFinish={login}>
              <Form.Item name="username"
                hasFeedback
                validateTrigger="onBlur" 
                rules={[
                  {
                    required:true,
                    message:'用户名不能为空'
                  }
                ]}>
                <Input placeholder='账号' prefix={<UserOutlined></UserOutlined>}></Input>
              </Form.Item>
              <Form.Item name="password"
                hasFeedback
                validateTrigger="onBlur"
                rules={[
                  {
                    validator:validatePwd
                  }
                ]}>
                <Input.Password placeholder='密码' prefix={<LockFilled></LockFilled>}></Input.Password>
              </Form.Item>
              <div style={{display:'flex'}}>
                <Form.Item name="captcha"
                  hasFeedback
                  validateTrigger="onBlur"
                  rules={[
                    {
                      validator:validateCode
                    }
                  ]}>
                      <Input placeholder='验证码' 
                             style={{width:'220px'}}
                             prefix={<VerifiedOutlined/>}>    
                      </Input>
                  </Form.Item>
                  <Form.Item>
                    <img
                      style={{height:'45px',marginLeft:'5px'}} 
                      src={`http://parkapi.jkwlw.top/admin/captcha.jpg?uuid=${uuid}`} onClick={()=>{
                         setUuid(v4())
                      }} />
                 </Form.Item>
              </div>
              <Form.Item>
                <Button type='primary' className='loginbtn' htmlType='submit'>登录</Button>
              </Form.Item>
            </Form>
         </div>
      </div>
    </div>
  )
}
export default withRouter(Login)
